W<template>
	<view class="content">
		<view class="top-box">
			<view class="search-box">
				<view class="picker-box">
					<view :class="i-r" @click="changePop">
						{{areaName==''?'城市':areaName}}
						<image class="icon" src="../../static/images/icon41.png" mode="widthFix"></image>
					</view>

				</view>
				<view class="input-box">
					<input type="text" placeholder="请输入门店名称搜索" @input="nameInput">
					<image class="icon" src="../../static/images/icon42.png" mode="widthFix" @click="search"></image>
				</view>
			</view>
		</view>

		<view class="list">
			<view class="item" v-for="(item,index) in list" :key="index" :item-id="index" :data-year="index">
				<view class="pic"
					:style="{background:item.logo?('url('+baseUrl+ item.logo +') center no-repeat'):'',backgroundSize:'cover'}">
				</view>
				<view class="text">
					<view class="t1">{{item.name}}</view>
					<view class="t2">{{item.area.fullName}}</view>
					<view class="t2">{{item.startTime}}~{{item.endTime}}</view>
					<view class="t2">{{item.phone}}</view>
				</view>
			</view>
		</view>
		
		

		<view class="prick" v-if="visible">

			<view class="picker-btn">
				<view class="cancel" @click="cancel">
					取消
				</view>
				<view class="define" @click="define">
					确定
				</view>
			</view>
			<picker-view :indicator-style="indicatorStyle" :value="value" @change="bindChange" class="picker-view">
				<picker-view-column>
					<!-- <view class="pitem" v-for="(item,index) in siteList" :key="index">{{item.name}}</view> -->
					<view class="item" v-for="(item,index) in province" :key="index">{{item.name}}</view>
				</picker-view-column>
				<picker-view-column>
					<!-- <view class="pitem" v-for="(item,index) in siteList[value[0]].cityList" :key="index">
						{{item.name}}
					</view> -->
					<view class="item" v-for="(item,index) in city" :key="index">{{item.name}}</view>
				</picker-view-column>

				<picker-view-column>
					<!-- <view class="pitem" v-for="(item,index) in siteList[value[0]].cityList[value[1]].areaList"
						:key="index">{{item.name}}</view> -->
						<view class="item" v-for="(item,index) in area" :key="index">{{item.name}}</view>
				</picker-view-column>

			</picker-view>

		</view>


	</view>
</template>

<script>
	import {
		storeinfo,
		getArea
	} from '@/api/common.js';
	export default {
		data() {
			return {
				baseUrl: this.$baseUrl,
				siteList: [],
				value: [0, 0, 0],
				areaName: '',
				visible: false,
				index: 0,
				list: [],
				areaId: '',
				shopname:'',
				province: [],
				city: [],
				area: []
			};
		},
		onLoad() {
			this.shopList();
			this.getarea();
		},
		methods: {
			getarea() {
				getArea({parentId:1}).then(res => {
					console.log(res)
					this.province = res.data.list
				})
				getArea({parentId:240}).then(res => {
					console.log(res)
					this.city = res.data.list
				})
				getArea({parentId:3014}).then(res => {
					console.log(res)
					this.area = res.data.list
				})
			},
			shopList() {
				storeinfo().then(res => {
					console.log(res)
					this.list = res.data.storeinfos
				})
			},
			bindChange(e) {
				console.log(e)
				const val = e.detail.value;
				// if (this.value[0] !== val[0]) {
				// 	this.value = val
				// }
				// if (this.value[1] !== val[1]) {
				// 	this.value = val
				// }
				// if (this.value[2] !== val[2]) {
				// 	this.value = val
				// }
				if (this.value[0] !== val[0]) {
					this.value = val;
					const index = this.value[0]
					this.provinceId = this.province[index].id
					this.city = []
					this.area = []
					getArea({parentId:this.provinceId}).then(res => {
						this.city = res.data.list
						const index2 = this.value[1]
						this.cityId = this.city[0].id
						getArea({parentId:this.cityId}).then(res => {
							this.area = res.data.list
						})
					})
				}
				if (this.value[1] !== val[1]) {
					this.value = val;
					const index2 = this.value[1]
					this.cityId = this.city[index2].id
					this.area = []
					getArea({parentId:this.cityId}).then(res => {
						this.area = res.data.list
					})
				}
				if (this.value[2] !== val[2]) {
					this.value = val
				}
			},
			changePop() {
				this.visible = !this.visible
			},
			define() {
				this.visible = false
				let val = this.value
				console.log(val)
				// if (this.siteList[val[0]].cityList[val[1]].areaList.length != 0) {
				// 	this.areaName = this.siteList[val[0]].name + this.siteList[val[0]].cityList[val[1]].name +
				// 		this.siteList[val[0]].cityList[val[1]].areaList[val[2]].name

				// 	this.areaId = this.siteList[val[0]].cityList[val[1]].areaList[val[2]].id
				// } else {
				// 	this.areaName = this.siteList[val[0]].name + this.siteList[val[0]].cityList[val[1]].name
				// 	this.areaId = this.siteList[val[0]].cityList[val[1]].id
				// }
				if(this.area.length > 0) {
					this.areaName = this.province[val[0]].name + this.city[val[1]].name + this.area[val[2]].name
					this.areaId = this.area[val[2]].id
				} else {
					this.areaName = this.province[val[0]].name + this.city[val[1]].name
					this.areaId = this.city[val[1]].id
				}
				this.search()
			},
			cancel() {
				this.areaName = ''
				this.areaId = ''
				this.value = [0, 0, 0]
				this.visible = false
				this.getarea()
				this.search()
			},
			nameInput(e){
				this.shopname = e.target.value
			},
			search(){
				uni.showLoading({
					title: '加载中...'
				})
				storeinfo({
					area_id: this.areaId,name:this.shopname
				}).then(res => {
					console.log(res)
					this.list = res.data.storeinfos
					uni.hideLoading()
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f5f5f5;
	}




	.top-box {
		padding: 30rpx;
		background-color: #fff;

		.search-box {
			border: 1px solid #ededed;
			display: flex;
			align-items: center;
			// padding: 20rpx 0;
			height: 90rpx;

			.picker-box {
				padding: 0 30rpx;

				.picker-name {
					display: inline-block;
				}

				.icon {
					width: 15rpx;
					margin-left: 15rpx;
					display: inline-block;
					vertical-align: middle;
				}
			}

			.input-box {
				flex: 1;
				display: flex;
				align-items: center;
				padding: 0 30rpx;
				border-left: 1px solid #ededed;
				height: 100%;

				input {
					width: 100%;
					padding-right: 30rpx;
					height: 100%;
				}

				.icon {
					width: 40rpx;
				}
			}
		}
	}

	.list {
		padding: 50rpx 30rpx;

		.item {
			width: 100%;
			background-color: #fff;
			display: flex;
			align-items: center;
			margin-bottom: 30rpx;

			.pic {
				width: 210rpx;
				height: 210rpx;
			}

			.text {
				padding: 0 30rpx;

				.t1 {
					font-size: 30rpx;
					color: #1a1a1a;
					margin-bottom: 30rpx;
				}

				.t2 {
					font-size: 28rpx;
					color: #595757;
					margin-bottom: 10rpx;
				}

				.t2:last-child {
					margin-bottom: 0rpx;
				}
			}
		}
	}



	.prick {
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 999;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);

		.picker-btn {
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 100%;
			border-bottom: 1px solid #f5f5f5;
			padding: 30rpx;
			background-color: #ffffff;
			bottom: 500rpx;
			position: absolute;
		}


	}

	.picker-view {
		width: 100%;
		height: 500rpx;
		position: absolute;
		bottom: 0;
		background-color: #ffffff;

		picker-view-column {
			-webkit-flex: 1;
			flex: 1;
			height: 100%;
			overflow: hidden;
			position: relative;
			z-index: 0;
		}
		
		.item {
			height: 68rpx !important;
			line-height: 68rpx!important;
			text-align: center;
			font-size: 28rpx !important;
		}

		.pitem {
			line-height: 68rpx !important;
			text-align: center;
		}


	}
</style>
